<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下滑显隐</title>
</head>

<body>
    <div id="pic">
        <img src="../img/8-07下滑显隐主图.png" width="100%">
    </div>
    <img id="pic_r" src="../img/8-07下滑显隐右.png">
    <img id="pic_l" src="../img/8-07下滑显隐左.png">
    <script>
        //解决思路：body添加一个滚动事件，获取滚当条到顶部的距离，当距离大于一定值时，设置两张图片的显隐。
        document.body.onscroll = function () {
            //获取 body滚动条到顶部的距离  document.documentElement.scrollTop; 是一个数字类型，不带单位 px；
            var s_top = document.documentElement.scrollTop;
            if (s_top > 200) {
                document.getElementById('pic_r').style.display = 'block';
                document.getElementById('pic_l').style.display = 'block';
            } else {
                document.getElementById('pic_r').style.display = 'none';
                document.getElementById('pic_l').style.display = 'none';
            }
        }
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #pic {
            width: 70%;
            margin: 0 auto;
        }

        #pic_r {
            position: fixed;
            top: 400px;
            right: 20px;
            display: none;
        }

        #pic_l {
            position: fixed;
            top: 400px;
            left: 20px;
            display: none;
        }
    </style>
</body>

</html>